<template>
  <view class="important-message">
    <circleTitle
        :title="`重要消息(${total})`"
        more-title="查看更多"
        @more="handleMore"
    />
    <view class="message-list" v-if="total>0">
    <view
        class="message-item"
        v-for="item in importantMessageList"
        :key="item.msgId"
        @click="handleDetail(item?.msgId)"
    >
        <view class="message-item__date">
          <view class="message-item__data__year">{{ item.year }}</view>
          <view class="message-item__data__day">{{ item.day }}</view>
        </view>
        <view class="message-item__content">
          <view class="message-item__title"
            ><text class="oneEllipsis title-text">{{ item.msgTitle }}</text
            ><text class="message-item__person" >发起人-{{ item.sendName }}</text>
          </view>
          <view class="message-item__desc oneEllipsis">{{ item.msgDescription }}</view>
        </view>
      </view>
    </view>
    <Empty v-else bgColor="#ffffff" />
  </view>
</template>

<script setup>
import Empty from "@/components/empty/index.vue";
import CircleTitle from "@/components/circle-title/index.vue";
import { ref, onMounted,defineExpose} from "vue";
import {messageList} from "@/api/user";

//列表
const total = ref(0)
const importantMessageList = ref([])
const getMessageList = async () => {
  try {
    const { data } = await messageList({
      msgType: "", //消息类型，1--合同，2--设计，3--施工，4--其他,为空则查所有
      viewType: "",
      size: 3,
      current: 1,
    });
    const records = data?.records || [];
    total.value = data?.total;
    importantMessageList.value = records.map((item) => {
      const [datePart, timePart] = item.createTime.split(" "); // "2024-11-02 16:11:18"
      const [year, month, day] = datePart.split("-");
      const newItem = {
        ...item,
        year,
        day: month + "-" + day,
        date: datePart,
      };
      return newItem;
    });
    uni.hideLoading()
  } catch (error) {
    console.log("消息列表接口数据", error);
    uni.hideLoading()
  }
};


const handleDetail = (msgId) => {
  uni.navigateTo({
    url: `/pages/messageManage/detail/detail?id=${msgId}`,
  });
};
const handleMore = () => {
  uni.navigateTo({
    url:"/pages/messageManage/list/list"
  });
};

defineExpose({
  getMessageList
});
onMounted(()=>{
  getMessageList()
})
</script>

<style lang="scss" scoped>
@import "../../../../style/common";
.important-message {
  margin-top: 40rpx;
  .message-list{
    .message-item{
      box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(100,116,139,0.05);
      border-radius: 20rpx;
      background: #fff;
      @include flexStyle(flex-start,center);
      margin-bottom: 10rpx;
      padding: 25rpx;
       &__date{
         font-weight: bold;
         text-align: center;
         border-right: 4rpx solid #E2E8F0;
         border-radius: 2rpx;
         padding-right: 20rpx;
         flex-shrink: 0;
         width: 100rpx;
         .message-item__data__year{
           @include fontStyle(28rpx,#86909C);
           margin-bottom: 15rpx;
         }
         .message-item__data__day{
           font-size: 28rpx;
           background: linear-gradient(90deg, #007DFF 0%, #83C0FF 99%);
           background-clip: text;
           -webkit-text-fill-color: transparent;
         }
       }
      &__content{
        width: calc(100% - 200rpx);
        flex-grow: 1;
        margin-left: 20rpx;

      }
      &__title{
        @include flexStyle();
        .title-text{
          width: 50%;
          @include fontStyle(24rpx,#3D3D3D,bold);
        }
      }
      &__person{
         @include fontStyle(20rpx,#86909C);
        flex-shrink: 0;
      }
      &__desc{
         @include fontStyle(24rpx,#4E5969);
        margin-top: 20rpx;
      }
    }
  }
}
</style>
